<template>
  <div class="book-management-container">
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <h1 class="title">
          <i class="el-icon-notebook-2"></i> 图书管理系统
        </h1>
        <div class="header-actions">
          <el-button 
            type="primary" 
            icon="el-icon-plus" 
            @click="showAddDialog"
            class="add-btn"
          >
            添加图书
          </el-button>
          <el-input
            placeholder="搜索图书..."
            v-model="searchText"
            clearable
            class="search-input"
            @clear="resetSearch"
            @keyup.enter.native="handleSearch"
          >
            <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
          </el-input>
        </div>
      </div>
      
      <el-table 
        :data="filteredBooks" 
        style="width: 100%" 
        border
        stripe
        v-loading="loading"
        element-loading-text="加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
        class="book-table"
        :default-sort="{prop: 'id', order: 'ascending'}"
      >
        <el-table-column 
          prop="id" 
          label="ID" 
          width="80" 
          sortable
          align="center"
        ></el-table-column>
        <el-table-column 
          prop="title" 
          label="书名"
          min-width="180"
        >
          <template slot-scope="scope">
            <span class="book-title">{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column 
          prop="author" 
          label="作者"
          width="150"
        ></el-table-column>
        <el-table-column 
          prop="copies" 
          label="库存" 
          width="120" 
          sortable
          align="center"
        >
          <template slot-scope="scope">
            <el-tag 
              :type="scope.row.copies > 3 ? 'success' : 'warning'"
              effect="dark"
            >
              {{ scope.row.copies }} 本
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column 
          label="操作" 
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <el-tooltip content="删除" placement="top">
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                circle
                @click="handleDelete(scope.row.id)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      
      <el-dialog 
        title="添加新图书" 
        :visible.sync="dialogVisible" 
        width="500px"
        @closed="resetForm"
        custom-class="book-dialog"
        :close-on-click-modal="false"
      >
        <el-form 
          :model="form" 
          :rules="rules" 
          ref="bookForm" 
          label-width="100px"
          label-position="left"
        >
          <el-form-item label="书名" prop="title">
            <el-input 
              v-model="form.title" 
              placeholder="请输入书名"
              prefix-icon="el-icon-notebook-1"
            ></el-input>
          </el-form-item>
          <el-form-item label="作者" prop="author">
            <el-input 
              v-model="form.author" 
              placeholder="请输入作者"
              prefix-icon="el-icon-user"
            ></el-input>
          </el-form-item>
          <el-form-item label="库存数量" prop="copies">
            <el-input-number 
              v-model="form.copies" 
              :min="1" 
              :max="100"
              controls-position="right"
            ></el-input-number>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button 
            type="primary" 
            @click="submitForm"
            :loading="submitting"
          >
            确 定
          </el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'BookManagement',
  data() {
    return {
      books: [
        {"id": 1, "title": "Python 编程", "author": "John Doe", "copies": 4},
        {"id": 2, "title": "历史的秘密", "author": "Jane Smith", "copies": 3},
        {"id": 3, "title": "宇宙探索", "author": "Emily Brown", "copies": 2},
        {"id": 4, "title": "健康生活", "author": "Mike Johnson", "copies": 5},
        {"id": 5, "title": "数学之美", "author": "Sarah Lee", "copies": 4},
        {"id": 6, "title": "艺术欣赏", "author": "David White", "copies": 3},
        {"id": 7, "title": "编程入门", "author": "Alice Green", "copies": 2},
        {"id": 8, "title": "科幻世界", "author": "Frank Black", "copies": 5},
        {"id": 9, "title": "自然奇观", "author": "Grace Blue", "copies": 4},
        {"id": 10, "title": "音乐之声", "author": "Tom Red", "copies": 3}
      ],
      loading: false,
      submitting: false,
      dialogVisible: false,
      searchText: '',
      form: {
        title: '',
        author: '',
        copies: 1
      },
      rules: {
        title: [
          { required: true, message: '请输入书名', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        author: [
          { required: true, message: '请输入作者', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    filteredBooks() {
      if (!this.searchText) return this.books
      const search = this.searchText.toLowerCase()
      return this.books.filter(book => 
        book.title.toLowerCase().includes(search) || 
        book.author.toLowerCase().includes(search)
      )
    }
  },
  methods: {
    showAddDialog() {
      this.dialogVisible = true
    },
    submitForm() {
      this.$refs.bookForm.validate((valid) => {
        if (valid) {
          this.submitting = true
          // 模拟异步操作
          setTimeout(() => {
            this.addBook()
            this.submitting = false
          }, 800)
        }
      })
    },
    addBook() {
      const newId = this.books.length > 0 
        ? Math.max(...this.books.map(book => book.id)) + 1 
        : 1
      
      this.books.unshift({
        id: newId,
        title: this.form.title,
        author: this.form.author,
        copies: this.form.copies
      })
      
      this.$notify({
        title: '成功',
        message: '图书添加成功',
        type: 'success',
        duration: 2000,
        offset: 50
      })
      
      this.dialogVisible = false
    },
    handleDelete(id) {
      this.$confirm('确认删除该图书吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'delete-confirm',
        center: true
      }).then(() => {
        this.books = this.books.filter(book => book.id !== id)
        this.$message({
          message: '删除成功',
          type: 'success',
          showClose: true,
          duration: 1500
        })
      }).catch(() => {
        this.$message({
          message: '已取消删除',
          type: 'info',
          showClose: true,
          duration: 1500
        })         
      })
    },
    resetForm() {
      this.$refs.bookForm.resetFields()
      this.form.copies = 1
    },
    handleSearch() {
      // 搜索逻辑已在计算属性中处理
    },
    resetSearch() {
      this.searchText = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.book-management-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  
  .box-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    
    .clearfix {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      
      .title {
        margin: 0;
        color: #333;
        font-size: 24px;
        display: flex;
        align-items: center;
        
        i {
          margin-right: 10px;
          color: #409EFF;
        }
      }
      
      .header-actions {
        display: flex;
        align-items: center;
        
        .add-btn {
          margin-right: 15px;
          padding: 10px 15px;
        }
        
        .search-input {
          width: 250px;
          transition: all 0.3s;
          
          &:hover {
            width: 280px;
          }
        }
      }
    }
    
    .book-table {
      margin-top: 20px;
      transition: all 0.3s;
      
      .book-title {
        font-weight: 500;
        color: #333;
      }
      
      /deep/ .el-table__header-wrapper {
        th {
          background-color: #f8f9fa;
          color: #495057;
          font-weight: 600;
        }
      }
      
      /deep/ .el-table__body-wrapper {
        tr:hover {
          td {
            background-color: #f1f7ff !important;
          }
        }
      }
    }
  }
}

